Summary

• Add hot module replacement infrastructure that enables swapping pion component renderers on live DOM instances without full page reloads
• Add Vite plugin that automatically detects pion component files and injects HMR accept handlers
• Hook state (useState, useReducer, etc.) is preserved across hot replacements

Architecture

The implementation has three parts:

1. HMR Runtime (src/hmr.ts)

• Component registry mapping tag names → { renderer, elementClass, instances }
• enableHMR() patches customElements.define to intercept pion component registrations
• First define call: registers normally + tracks in registry
• Subsequent define calls (same tag): extracts new renderer via rendererSymbol, swaps it on all live instances via _scheduler.renderer, triggers _scheduler.update()

2. Component integration (src/component.ts, src/symbols.ts)

• rendererSymbol stored on each Element class so the HMR runtime can extract it
• hmrTagSymbol set on prototypes so instances self-register in connectedCallback/disconnectedCallback
• Instance tracking only activates when isHMRActive() is true (zero overhead in production)

3. Vite Plugin (src/vite-plugin.ts)

• transformIndexHtml: injects <script type="module"> preamble that calls enableHMR() before app code loads
• transform: detects files matching customElements.define('tag', component(...)) and appends import.meta.hot.accept()
• Only active during vite serve (no effect on production builds)

Usage

// vite.config.ts
import { defineConfig } from 'vite';
import pion from '@pionjs/pion/vite-plugin';

export default defineConfig({
  plugins: [pion()],
});

No changes needed in component files.

Known limitations

• Only works with pion component() — Polymer/legacy components are not hot-replaceable
• observedAttributes changes during HMR won't take effect (read once by the browser at define time)
• Source maps from the Vite plugin transform are not yet generated

Tests

Added test/hmr.test.ts covering:

• Component registration in HMR registry
• Instance tracking via connected/disconnected callbacks
• Renderer hot replacement with re-render
• Hook state preservation across replacements
• Graceful handling of no-instance and re-define scenarios
• Multiple instance updates